<style rel="stylesheet/scss" lang="scss" scoped>
	.box-flex{
		display: flex;
		margin-bottom: 20px;
		.sp{
			margin-left: 10px;
		}
		.flex-box{
			flex: 1;
			display: flex;
			flex-direction: column;
			>span{
				margin-left: 10px;
			}
			>div{
				margin: 20px 0;
				margin-left: 50px;
			}
		}
	}
	.w-span{
		min-width: 100px;
		line-height: 40px;
		display: inline-block;
	}
</style>
<template>
	<div >
		<el-row class=" box-flex">
			<el-col :span="6" class="box-flex m-l-10">
				<span class="w-span">角色描述</span>
				<el-input placeholder="单行输入" clearable  v-model="roleName" maxLength="20"></el-input>
			</el-col>
		</el-row>
		<el-row class="box-flex">
			<span class="sp">权限描述</span>
			<div class="flex-box">
				<div v-for='(menu, index) in menuList'>
					 <el-checkbox v-model="menu.select" @change="selectChildAllFn(menu)"> {{menu.name}}</el-checkbox>
					<div  style='width:600px;height:auto;margin-left:30px;margin-top: 5px;' >
						<div style="width:200px;display:inline-block" v-for='(f, childIndex) in menu.childMenu'>
							<el-checkbox v-model="f.select" @change="selectChildItem(menu)" v-if="f.name !='会员等级'"> {{f.name}}</el-checkbox>
							<el-checkbox v-model="f.select" @change="selectChildItem(menu)" v-if="f.name =='会员等级' && getSeniorMall"> {{f.name}}</el-checkbox>
						</div>
					</div>
				</div>
			</div>
		</el-row>
		<el-row class="box-flex">
			<el-button type="primary" @click="submitRole">保存</el-button>
		</el-row>
	</div>
</template>
<script>
	import { mapMutations,mapGetters } from 'vuex'
	import { DEFAUL_INDEX, SUCCESS_REQUEST_STATUS ,memuList } from '@/utils/config.js'
	import {
			getToken
	} from '@/utils/auth'
	export default {
		props: {
			roleId: {
				type: String,
				required: false,
				default: ''
			},
			targetMenuList: {
				type: Array,
				required: false,
				default: []
			},
			roleParentName: {
				type: String,
				required: false,
				default: ''
			}
		},
		data() {
			return {
				menuList: [],
				roleName: '',
			}
		},
		created() {
				this.menuList = memuList
				if(this.targetMenuList.length > 0) {
					this.menuList = this.targetMenuList
					this.menuList.forEach((item) => {
						item.num = item.childMenu.filter((cel) => {return cel.select}).length
					})
					this.roleName = this.roleParentName
				} else{
					this.menuList.forEach((item) => {
						item.select = false
						item.num = 0
						item.childMenu.forEach((cel) => {
							cel.select = false
						})
					})
				}
				console.log('权限')
				console.log(this.menuList)
		},
		methods: {
			// 选择子菜单
			selectChildItem(item) {
				let menuLength = item.childMenu.filter((cel) => { return cel.select}).length
				item.select = menuLength == item.childMenu.length ? true : false
				item.num = menuLength>0  ? 1 : 0
				console.log(item)
			},
			// 选择父级
			selectChildAllFn(item) {
					
					item.num = item.select  ? 1 : 0
					item.childMenu.forEach((cil) => {
						cil.select = item.select
					})
					console.log(item)
			},
			handleChildMenu(list) {
				let attr = []
				list.forEach((item) => {
					
						let obj = {
							name: item.engName,
							select: item.select
						}
						attr.push(obj)
					
				})
				return attr
			},
			filterMenu(list) {
				let falg = false
				list.forEach((item) => {
					item.childMenu.forEach((cel) => {
						if(cel.select){
							falg = true
						}
					})
				})
				return falg
			},
			// 保存数据
			submitRole() {
				console.log(this.menuList)
				console.log(this.menuList.filter((item) => { return item.select }).length)
				let attr = !this.roleName ? '请填写角色名称': !this.filterMenu(this.menuList) ? '请选择权限配置': ''
				if(attr) {
					this.$message({
					  message: attr,
					  type: 'warning'
					});
					return
				}
				let selecttList = this.menuList.filter((item) => { return item.num >0 })
				let menu = []
				if(selecttList && selecttList.length > 0) {
					selecttList.forEach((child) => {
						let menuObj = {
							name: child.engName,
							menu: this.handleChildMenu(child.childMenu)
						}
						menu.push(menuObj)
					})
				}
				console.log(menu)
				this.$ajax({
					api: 'admin/role/save',
					contentType: 'application/json',
					params: {
						id: this.roleId,
						menu: menu,
						name: this.roleName,
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : '',
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							message: '操作成功',
							type: 'success'
						})
						this.$emit('refresh')
						this.setTabCurrentIndex(2)
					}else{
						this.$message({
							message: res.data.message,
							type: 'error'
						})
					}
				})
			},
			/**
			 * @desc 设置父级选中
			 */
			selectRole(item, index) {
				let se = document.getElementById("checkbox"+index).checked　
				this.menuList[index].select = se
				this.menuList[index].seList.forEach((item, childIndex) => {
					item.select = se
				})
				
			},
			/**
			* @desc 设置子选中
			*/
			selectChild(preIndex, childIndex) {
				let se = document.getElementById("checkbox"+preIndex+childIndex).checked　
				let childSelectLength = 0
				this.menuList[preIndex].seList[childIndex].select = se
				childSelectLength = this.menuList[preIndex].seList.filter((item) => { return item.select}).length
				let preCheck = document.getElementById("checkbox"+preIndex)
				preCheck.checked = childSelectLength == this.menuList[preIndex].seList.length ? true : false 
			},
			...mapMutations({
				setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
			}),
		},
		computed: {
			...mapGetters([
				'getSeniorMall',
				'secondDirectory',
				'merchantInfo'
			])
		}
	}
</script>
